<%@ page import="dao.Section" %>
<%@ page import="service.CourseService" %>
<%@ page import="java.util.List" %>
<%@ page import="dao.Lesson" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    int cid = Integer.parseInt(request.getParameter("cid"));
    String courseName = request.getParameter("courseName");

    List<Section> sections = CourseService.getSectionsByCid(cid);
    List<List<Lesson>> lessonsList = new ArrayList<>();
    for (int i = 0; i < sections.size(); i++) {
        List<Lesson> lessons = CourseService.getLessonsBySectionId(sections.get(i).sectionId);
        lessonsList.add(lessons);
    }
%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频播放页面</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/play.css">
    <script src="lib/vue.js"></script>
    <script src="lib/vue-resource.js"></script>
</head>
<body>
<div id="app">
    <!--main-->
    <div class="main">
        <div class="back">
            <a href="course.jsp?cid=<%=cid%>">
                <button>
                    <span class="iconfont icon">&#xe659;</span>
                    <span class="text">返回课程主页</span>
                </button>
            </a>
        </div>
        <div class="title">
            <p><%=courseName%>
            </p>
        </div>
        <div class="main-top-bar ">
            <a href="javascript:;" class="current">课程视频</a>
            <a href="javascript:;">课程测试</a>
        </div>
        <div class="main-content">
            <div class="dom" style="display: block;">
                <div class="ear">
                    <div id="left-ear"></div>
                    <div id="right-ear"></div>
                </div>
                <div class="main-video">
                    <video controls autoplay>
                        <source :src="videoPath" type="video/mp4">
                    </video>
                </div>
            </div>
            <div class="dom">
                <div class="main-test">
                    <ul>
                        <li v-for="question,k in questions" :key="question.id">
                            <pre style="display: inline"><p class="problem">{{k+1}}.【单选题】{{question.problem}}</p></pre>
                            <br/>
                            <div v-for="opt,i in question.options" :key="opt.optID">
                                <input :name="question.id" type="radio" :value="i" v-model="question.choice"/>
                                <span>{{String.fromCharCode(i+65)}}、<pre style="display: inline">{{opt.answer}}</pre></span>
                            </div>
                        </li>
                        <li>
                            <p>{{questions.length+1}}.自评</p><br/>
                            <div>
                                <input name="self_evaluation" type="radio" value="100" v-model="evaluation">
                                <span>A、简单</span>
                            </div>
                            <div>
                                <input name="self_evaluation" type="radio" value="80" v-model="evaluation">
                                <span>B、较简单</span>
                            </div>
                            <div>
                                <input name="self_evaluation" type="radio" value="60" v-model="evaluation">
                                <span>C、一般</span>
                            </div>
                            <div>
                                <input name="self_evaluation" type="radio" value="40" v-model="evaluation">
                                <span>D、较难</span>
                            </div>
                            <div>
                                <input name="self_evaluation" type="radio" value="20" v-model="evaluation">
                                <span>E、难</span>
                            </div>

                        </li>

                    </ul>
                </div>
                <div class="sub" id="sub-f">
                    <input type="submit" value="提交答案" id="sub"  @click="submitAnswer">
                    <component :is="com" :score="score" :final="finalScore" @func="removeScoring"></component>
                </div>
            </div>

        </div>
        <div class="main-btn">
            <button>上一课</button>
            <button>下一课</button>
        </div>
    </div>

    <!--menu-->
    <div id="menu" class="menu">
        <div class="menu-top"><span class="iconfont icon">&#xe64f;目录</span></div>
        <div class="menu-content">
            <ul id="menu-ul">
                <%
                    for (int i = 0; i < lessonsList.size(); i++) {
                        List<Lesson> lessons = lessonsList.get(i);
                %>
                <li>
                    <span class="iconfont">&#xe65a;</span>
                    <span class="iconfont" style="display: none">&#xe658;</span>
                    <span>第<%=(i + 1)%>章 <%=sections.get(i).sectionName%> </span>
                    <ul name="ul" style="display: none">
                        <%
                            for (int j = 0; j < lessons.size(); j++) {
                                Lesson lesson = lessons.get(j);
                        %>
                        <li id="<%=lesson.lid%>" tag="<%=lesson.videoPath%>" @click="play($event)">
                            <span><%=(i + 1)%>.<%=(j + 1)%> <%=lesson.lessonName%></span>
                        </li>
                        <%
                            }
                        %>
                    </ul>
                </li>
                <%
                    }
                %>
            </ul>
        </div>
    </div>
    <div class="fold" id="fold">
        <span class="iconfont">&#xe65b;</span>
        <span class="iconfont" style="display: none">&#xe659;</span>
    </div>

</div>


<template id="scoring">
    <div class="score">
        <span class="t">本次测试成绩为：</span>
        <span class="s">{{score}}</span>
        <span class="t">综合成绩为：</span>
        <span class="s">{{final}}</span>
        <span class="c" @click="removeSelf">点我继续测试</span>
    </div>
</template>


<script src="js/myFunc.js"></script>
<script>
    window.onload = function () {
        //*******选项卡******
        let as = document.getElementsByClassName('main-top-bar')[0].getElementsByTagName('a');
        let contents = document.getElementsByClassName('dom');

        for (let i = 0; i < as.length; i++) {
            // 1.2.1 取出单个对象
            let a = as[i];
            a.id = i;

            // 1.2.2 监听鼠标的移动事件
            a.onclick = function () {
                // 让所有的a的class都清除
                for (let j = 0; j < as.length; j++) {
                    as[j].className = '';
                    contents[j].style.display = 'none';
                }

                // 设置当前a的class
                this.className = 'current';
                // 从contents数组中取出对应的标签
                contents[this.id].style.display = 'block';
            }

        }

        //*******子目录收缩******
        var lis = $("menu-ul").children;

        for (var i = 0; i < lis.length; i++) {
            var icons = lis[i].getElementsByClassName('iconfont');
            // console.log(icon);
            icons[0].clicktime = 0;
            icons[1].clicktime = 0;
            (function (i) {
                var icons = lis[i].getElementsByClassName('iconfont');
                var ul = lis[i].querySelector('li>ul');
                // console.log(icons[0], ul);
                icons[0].onmousedown = function () {
                    var time = ++icons[0].clicktime;
                    // console.log('1');
                    ul.style.display = 'block';
                    icons[0].style.display = 'none';
                    icons[1].style.display = 'block';
                }
                icons[1].onmousedown = function () {
                    var time = ++icons[1].clicktime;
                    // console.log('2');
                    ul.style.display = 'none';
                    icons[1].style.display = 'none';
                    icons[0].style.display = 'block';
                }
            })(i)
        }

        //*******目录出现消失******
        var btn = $("fold").children;
        var menu = $("menu");
        var main = document.getElementsByClassName('main')[0];
        btn[0].onmousedown = function () {
            btn[0].style.display = 'none';
            btn[1].style.display = '';
            menu.style.display = 'none';
            main.style.width = "100%";
        }
        btn[1].onmousedown = function () {
            btn[0].style.display = '';
            btn[1].style.display = 'none';
            menu.style.display = '';
            main.style.width = "75%";
        }
    }

    var scoring={
        template:"#scoring",
        methods: {
            removeSelf(){
                this.$emit('func');
            }
        },
        props:['score','final']
    };

    var vm = new Vue({
        el: "#app",
        data:{
            com:'',
            videoPath:'',
            lid:'',
            difficulty:2,
            score:0,
            evaluation:'',
            finalScore:'',
            questions:[],
        },
        methods:{
            submitAnswer(){
                this.com='scoring';
                this.score=0;
                for(var i=0;i<this.questions.length;++i){
                    this.score+= this.questions[i].choice===this.questions[i].checked ? this.questions[i].score : 0;
                }
                this.finalScore=this.score*0.8+this.evaluation*0.2;
            },
            removeScoring(){
                this.com='';
                if(this.difficulty===2){
                    if(this.finalScore>=60&&this.finalScore<=80){
                        alert("您的学习力一般，建议对课程内容加深理解后再继续学习。");
                    }else if(this.finalScore<60){
                        this.difficulty=0;
                    }else {
                        this.difficulty=4;
                    }
                }else if(this.difficulty===0){
                    if(this.finalScore<60){
                        alert("您对本堂课掌握不合格，建议巩固基础，复习之前的课程内容！");
                    }else {
                        this.difficulty=1;
                    }
                }else if(this.difficulty===4){
                    if(this.finalScore<80){
                        this.difficulty=3;
                    }else {
                        alert("您的学习力优秀，建议继续学习下一节。");
                    }
                }else if(this.difficulty===1){
                    if(this.finalScore<60){
                        alert("您对本堂课掌握不太合格，建议巩固基础，复习之前的课程内容！");
                    }else {
                        alert("您的学习力一般，建议对课程内容加深理解后再继续学习。");
                    }
                }else if (this.difficulty===3){
                    if(this.finalScore<60){
                        alert("您的学习力合格，建议对课程内容加深理解");
                    }else {
                        alert("您的学习力良好，建议继续学习下一节。");
                    }
                }
            },
            play(e){
                var element=e.currentTarget;
                this.videoPath=element.getAttribute("tag");  // tag 为自定义属性
                this.lid=element.id;
                this.difficulty=2;
            },
            getQuestion(lid,difficulty){
                this.$http.get("http://152.136.148.42:8080/College_war_exploded/GetQuestion?lid="+lid+"&difficulty="+difficulty).then(
                    result=> {
                        if(result.body.length===0){
                            alert("恭喜你已经做完所有题目!");
                            --this.difficulty;
                            return ;
                        }
                        this.questions=result.body;
                    },()=>{
                        alert("获取测试失败！");
                    }
                )
            }
        },
        components:{
            scoring
        },
        watch:{
            videoPath:function () {
                const video = document.querySelector("video");
                video.load();
                video.play();
            },
            difficulty: function () {
                this.getQuestion(this.lid,this.difficulty);
            },
            lid:function () {
                this.getQuestion(this.lid,this.difficulty);
            }
        }
    })
</script>
</body>
</html>